<template>
  <div>
    <el-row style="margin-bottom: 60px" :gutter="10">
      <el-col :span="6">
        <el-card>
          <div style="color: #1ba784"><i class="el-icon-user"/> 用户总数</div>
          <div style="padding: 10px; font-weight: bold">
            <el-tag>{{ this.userTotal }}</el-tag>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="color:#5e665b;"><i class="el-icon-tickets"/> 今日请假人数</div>
          <div style="padding: 10px; font-weight: bold">
            <el-tag type="info">{{ this.userNumDay }}</el-tag>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="color:#5e665b;"><i class="el-icon-tickets"/> 本周请假人数</div>
          <div style="padding: 10px; font-weight: bold">
            <el-tag type="info">{{ this.userNumWeek }}</el-tag>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="color:#5e665b;"><i class="el-icon-tickets"/> 本月请假人数</div>
          <div style="padding: 10px; font-weight: bold">
            <el-tag type="info">{{ this.userNumMonth }}</el-tag>
          </div>
        </el-card>
      </el-col>

    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card id="lineMain" style="width: 100%; height: 400px"></el-card>
      </el-col>
      <el-col :span="12">
        <el-card id="pieMain" style="width: 100%; height: 400px"></el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Home",
  data() {
    return {
      userTotal: 0,
      userNumDay: 0,
      userNumWeek: 0,
      userNumMonth: 0,

    }
  },
  //页面渲染后触发
  mounted() {
    const lineChartDom = document.getElementById('lineMain');
    const pieChartDom = document.getElementById('pieMain');
    const lineChart = echarts.init(lineChartDom);
    const pieChart = echarts.init(pieChartDom);
    const lineOption = {
      title: {
        text: '请假人数柱状图',
        left: 'center',
      },
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'line',
          smooth: true
        }
      ]
    }
    const pieOption = {
      title: {
        text: '每日请假人数饼状图',
        left: 'center'
      },
      toolbox: {
        show: true,
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: '50%',
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    this.$axios.get("/check/homeList").then(res => {
      let lineData = res.data.data
      let pieData = []
      for (let i = 0; i < lineData.x.length; i++) {
        let obj = {};
        obj.name = lineData.x[i];
        obj.value = lineData.y[i];
        pieData[i] = obj
      }
      lineOption.xAxis.data = lineData.x
      lineOption.series[0].data = lineData.y
      pieOption.series[0].data = pieData
      lineChart.setOption(lineOption);
      pieChart.setOption(pieOption);
    });

    //获取总人数
    this.$axios.get("/user/total").then(res => {
      if (res.data.code === 200) {
        this.userTotal = res.data.data;
      }
    });//获取今日请假数
    this.$axios.get("/user/totalQingjia").then(res => {
      if (res.data.code === 200) {
        this.userNumDay = res.data.data.numDay;
        this.userNumWeek = res.data.data.numWeek;
        this.userNumMonth = res.data.data.numMonth;
      }
    });
  },
}
</script>

<style scoped>

</style>